﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab标签切换样式</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
body {
	padding:0;
	margin:0;
	background:#fff;
	overflow-x: hidden; overflow-y: hidden;
}
body,html {
	height:100%
}
#wrapper{
	overflow: hidden;
	height: 250px;
	position: relative;
}
#wrapper ul {
	position: absolute;
	left: 0;
	top: 0;
}
li{
	position: initial;
	float: left;
	list-style: none;
}
img{
	width:350px;
	}
</style>
</head>
<body>
<h1>水平滚动</h1>
<div id="div1">
	<span id="params1"></span>
	<span id="params2"></span>
	<span id="params3"></span>
</div>
<div id="wrapper">
	<ul class="picUL">
		<li name="1"><img src="img/3.gif" data-url="#"></li>
		<li name="2"><img src="img/1.gif" data-url="#"></li>		
		<li name="3"><img src="img/4.gif" data-url="#"></li>
		<li name="4"><img src="img/5.png" data-url="#"></li>
		
	</ul>
</div>
<script src="./js/jquery-1.9.0.min.js" charset="utf-8"></script>
<script>
$(function() {
	var index = 0;
	var liArr = $("#wrapper ul li");//获取li数组
	var leftN = $("#wrapper ul").offset().left;
	var imgW = $("#wrapper ul li img").width();//图片宽度
	var ulW = liArr.length*imgW;
	var liLth = liArr.length;
	$("#wrapper ul").width(ulW+'px');//.style.width=ulW+'px';
	
	var node = $("#wrapper ul").children("li").get(0).cloneNode(true);
	console.log($("#wrapper ul")) ;
	
	$("#wrapper ul").append(node);
	
	//var timer = setInterval(autoplay,100);
	$("#wrapper ul").on('mouseover',function(){
		console.log("***鼠标移入*****");
		clearInterval(timer);
	});
	$("#wrapper ul").on('mouseout',function(){
		console.log("***鼠标移出*****");
		//timer = setInterval(autoplay,100);
	});
	
	//播放
	function autoplay(){
		index ++;
		console.log("***index***** "+index);
		show();
	};
	function show(){
		if(index >= liLth){
			index = 1;
		}
		var target = index*ulW;
		console.log("***target***"+target);
		leftN --;
		move(leftN);
		
		//animate($("#wrapper ul"),{left:target});
	};
	function move(val){
		$("#wrapper ul").animate({'left': val+'px'}, 10);
		//$("#wrapper ul").css({'left':val});
	}
})	
	
	
	
	
</script>
</body>
</html>